//导入常量
const path = require('path')

//导入html-webpack-plugin插件，得到构造函数，首字母尽量大写
const HtmlPlugin = require('html-webpack-plugin')
//创建实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',//复制的文件路径
    filename: './index.html' //复制出来的文件放到什么位置
})

//导入clean-webpack-plugin自动清理旧文件的插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()


module.exports = {
    //1、mode 用于指定构建模式时development还是production
    // mode:'development' 用来指定构建模式，可选值是development（开发）和 production(上线) 【现在mode写到 package.json中】

    //2、webpack打包方式的使用
    //指定打包的入口
    entry: path.join(__dirname, './src/index.js'),
    //指定打包的出口
    output: {
        //表示输出文件的存放路径
        path: path.join(__dirname, './dist'),
        // 表示输出文件的名称
        filename: 'js/bundle.js',
        clean: true
    },

    //3、webpack-dev-server插件的使用，需要指明路径
    //告知 webpack-dev-server，将 './' 目录下的文件 serve 到 localhost:8080 下(寄存到服务器下)
    devServer: {
        // open: true, //初次打包会自动打开浏览器
        host: 'localhost',  //设置服务启动地址
        port: 8888, // 设置服务启动的端口号
        // static: "./" // 启动默认的路径
    },

    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            {
                test: /\.png|jpg|gif$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024    //(表示100kb以下的文件转换成base64编码)
                    }
                },
                generator:{
                    filename: 'image/[name].[hash:6][ext]'
                }
            }
            // {test:/\.jpg|png|gif$/,use:'url-loader'}  //新版本已经兼容了图片显示，同时该配置运行后图片无法加载
            //url-loader?limit=12345： limit限定图片传递大小，小于该值可以转成base64存储
        ]
    },
    //4、html-webpack-plugin的使用
    plugins: [cleanPlugin,htmlPlugin],//挂载插件的实例对象
    devtool:'eval-source-map'
}